<script setup lang="ts">
import Detail from './dialog/detail/index.vue';
import { SearchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { doGetBomList, doDelBom } from '@/api/modeling/bom/index';
import addDataStore from '@/store/modules/addDataStore';
import { Plus, Delete } from '@element-plus/icons-vue';
import type { BomData } from '@/api/modeling/bom/model/type';

defineOptions({
    name: 'BOMList'
});

const tableRef = ref<TableRef>();
const searchRef = ref<SearchRef>();

const router = useRouter();
const store = addDataStore();
const { handleAddData } = store;

/**
 * @: 表格新增
 */
const handleAdd = () => {
    handleAddData('bomAddData');
    tableRef.value?.clearSelection();
    router.push('/modeling/add');
};

/**
 * @: 删除相关
 * @param {*} ref
 * @return {*}
 */
const delIds = ref<number[]>([]);
const selectIds = ref<number[]>([]);
const bomList = ref<BomData[]>([]);
const handleSelection = (list: BomData[]) => {
    bomList.value = list;
    selectIds.value = list.map(item => item.id! as number);
    delIds.value = [...selectIds.value];
};
const { handleDel, rowDel } = useDelRow(tableRef, delIds, doDelBom);

/**
 * @: 编辑操作
 */
const handleDialog = (row: BomData) => {
    router.push({
        path: '/modeling/edit',
        query: {
            id: row.id
        }
    });
};

/**
 * 查看
 */
const modelRef = ref();
const handleView = (row: BomData) => {
    modelRef.value.open(row.id);
};
</script>

<template>
    <q-page>
        <base-search ref="searchRef" :table-ref="tableRef" :search-config="SearchConfig" />

        <base-table
            ref="tableRef"
            :hide-del="true"
            :table-config="tableConfig"
            :get-data-fn="doGetBomList"
            action-width="150"
            @selection-change="handleSelection"
            @edit="row => handleDialog(row)"
            @del="rowDel"
        >
            <template #tableHeadStart>
                <el-button class="m-r-16" type="primary" :icon="Plus" @click="handleAdd">
                    新增
                </el-button>
            </template>

            <template #tableHeadEnd>
                <el-button
                    class="m-r-16"
                    :disabled="delIds.length === 0"
                    :icon="Delete"
                    @click="handleDel(`选中${selectIds.length}行数据，删除后无法恢复，确认删除？`)"
                >
                    删除
                </el-button>
            </template>

            <!-- 查看 -->
            <template #preBtn="{ row }">
                <el-link type="primary" @click="handleView(row)">查看</el-link>
            </template>

            <!-- 操作 -->
            <template #action="{ row }">
                <el-link
                    type="primary"
                    class="m-l-24"
                    @click="$router.push({ path: '/BomDetail', query: { id: row.id } })"
                >
                    详情
                </el-link>
            </template>
        </base-table>
        <!-- 查看详情 -->
        <Detail ref="modelRef" />
    </q-page>
</template>

<style scoped lang="scss">
@include b(align-center) {
    display: flex;
    align-items: center;
}
</style>
